import Login from '@/views/Login'
import React, { lazy } from 'react'
import { Navigate } from 'react-router-dom'
import Home from '../views/Home'
import Layout from '../views/Layout'
const NotPage = lazy(()=> import('../views/NotPage/index.tsx'))
const About = lazy(()=> import('../views/About/index.tsx'))
const UserList = lazy(()=> import('../views/User/list.tsx'))
const UserWhiteList = lazy(()=> import('../views/User/whiteList.tsx'))

const withLoadingComponent = (comp:JSX.Element)=>(
    <React.Suspense fallback={<div>loading...</div>}>
        {comp}
    </React.Suspense>
)

const routes = [
    {
        path:'/',
        element:<Navigate to='/home' />
    },
    {
        path:'/',
        element:<Layout/>,
        children:[
            {
                path:'/home',
                element:withLoadingComponent(<Home />)
            },
            {
                path:'/about',
                element:withLoadingComponent(<About />)
            },
            {
                path:'/user/list',
                element:withLoadingComponent(<UserList />)
            },
            {
                path:'/user/whiteList',
                element:withLoadingComponent(<UserWhiteList />)
            },
        ]
    },
    {
        path:'/login',
        element:<Login/>
    },
    {
        path:'*',
        element:withLoadingComponent(<NotPage />)
    }
]
export default routes